<template>
  <div class="group-container">
    <div class="group-header">
      <span>一回:{{ oneReplyCount }} 二回:{{ twoReplyCount }}</span>
      <a-button type="link" size="small">
        <PlusOutlined />
      </a-button>
    </div>
    <div class="group-list">
      <div class="group-item" v-for="(group, index) in chatStore.groupList" :key="index" :class="{ active: index === 0 }">
        <span>{{ group.groupName }}</span>
        <span class="group-count">{{ group.count || 0 }}</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { PlusOutlined } from '@ant-design/icons-vue';
import { onMounted, computed } from 'vue';
import { useChatStore } from '../stores/chat';

const chatStore = useChatStore();

// 计算一回会话数量（回复次数 >= 1）
const oneReplyCount = computed(() => {
  return chatStore.messageList.filter(item => item.reply >= 1).length;
});

// 计算二回会话数量（回复次数 >= 2）
const twoReplyCount = computed(() => {
  return chatStore.messageList.filter(item => item.reply >= 2).length;
});

onMounted(async () => {
  await chatStore.fetchGroupList();
});
</script>

<style scoped>
.group-container {
  background-color: #FFF;
  height: calc(100vh - 40px);
  width: 350px;
  border-radius: 10px 0 0 10px;
  display: flex;
  flex-direction: column;
  margin-right: 1px;
}

.group-header {
  padding: 15px 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #eaeaea;
}

.group-list {
  overflow-y: auto;
  flex: 1;
}

.group-item {
  padding: 12px 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: all 0.3s;
  border-bottom: 1px solid #f0f0f0;
}

.group-item:hover {
  background-color: #f0f0f0;
}

.group-item.active {
  background-color: #e9ffef;
  color: #20c35c;
  font-weight: 500;
}

.group-count {
  background-color: #eaeaea;
  border-radius: 10px;
  padding: 2px 8px;
  font-size: 12px;
}
</style>